<template>
	<el-card>
		<el-tag
			v-auth="'site:tag:list'"
			:key="tag.id"
			v-for="tag in data.dynamicTags"
			closable
			:disable-transitions="false"
			size="medium"
			@close="handleDelete(tag.id)"
		>
			{{ tag.name }}
		</el-tag>
		<el-input
			v-if="data.inputVisible"
			:ref="saveTagInput"
			v-model="data.inputValue"
			class="input-new-tag"
			size="medium"
			placeholder="输入标签..."
			maxlength="6"
			@keyup.enter="handleInputConfirm"
			@blur="handleInputConfirm"
		>
		</el-input>
		<el-button v-else class="button-new-tag" @click="showInput">+</el-button>

		<!-- <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button v-auth="'site:tag:save'" type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button v-auth="'site:tag:delete'" type="danger" @click="deleteBatchHandle()">删除</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column>
			<el-table-column prop="type" label="类型 0：文章 1：相册" header-align="center" align="center"></el-table-column>
			<el-table-column prop="name" label="标签名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="sort" label="排序" header-align="center" align="center"></el-table-column>
			<el-table-column prop="version" label="版本号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="deleted" label="删除标识  0：正常   1：已删除" header-align="center" align="center"></el-table-column>
			<el-table-column prop="creator" label="创建者" header-align="center" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
			<el-table-column prop="updater" label="更新者" header-align="center" align="center"></el-table-column>
			<el-table-column prop="updateTime" label="更新时间" header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-button v-auth="'site:tag:update'" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
					<el-button v-auth="'site:tag:delete'" type="text" size="small" @click="deleteBatchHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination> -->

		<!-- 弹窗, 新增 / 修改 -->
		<!-- <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update> -->
	</el-card>
</template>

<script setup lang="ts" name="TagIndex">
import { useCrud } from '@/hooks'
import { onMounted, reactive, ref } from 'vue'
// import AddOrUpdate from './add-or-update.vue'
import { IHooksOptions } from '@/hooks/interface'
import { useTagListApi, useTagDeleteApi, useTagSubmitApi } from '@/api/site/tag'

const data = reactive({
	dynamicTags: [],
	inputVisible: false,
	inputValue: ''
})

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

// const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)

onMounted(async () => {
	const tagList = await useTagListApi()
	console.log('tagList', tagList)
	data.dynamicTags = tagList.data
})
//
const saveTagInput = (el: { ref: { focus: () => void } | null | undefined }) => {
	if (el!! && el.ref !== null && el.ref !== undefined) {
		el.ref.focus()
	}
}

// 删除标签
const handleDelete = async (id: Number) => {
	// 1.删除
	await useTagDeleteApi(id)
	// 2.重新加载
	const tagList = await useTagListApi()
	data.dynamicTags = tagList.data
}

// 显示输入框
const showInput = () => {
	data.inputVisible = true
}

// 输入完成
const handleInputConfirm = async () => {
	let inputValue = data.inputValue
	if (inputValue) {
		// 1.保存
		let dataForm = { name: inputValue, sort: 0 }
		const res = await useTagSubmitApi(dataForm)
		// 2.重新加载
		const tagList = await useTagListApi()
		data.dynamicTags = tagList.data
	}
	data.inputVisible = false
	data.inputValue = ''
}
</script>

<style lang="scss" scoped>
.el-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
	vertical-align: bottom;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}
</style>
